<template>
  <div class="data-v-loading3" :style="hostSty">
    <div class="text">
      <span>LOADING</span>
      <span class="dot">{{ dot }}</span>
      <span style="margin: 0 5px">{{ percent }}</span>
    </div>

    <div class="square top-left"></div>
    <div class="square top-right"></div>
    <div class="square bottom-left"></div>
    <div class="square bottom-right"></div>
  </div>
</template>

<script>
import Color from "color-js";
export default {
  name: "data-v-loading3",
  props: ["percentage", "color"],
  computed: {
    percent() {
      return (this.percentage * 100).toFixed(2) + "%";
    },

    sty() {
      return {
        width: this.percent
      };
    },

    hostSty() {
      let c = Color("#fff");
      return {
        "--color-text": this.color,
        "--color-line": c.setAlpha(0.3),
        "--color-square": c
      };
    }
  },

  data() {
    return {
      dot: ""
    };
  },

  created() {
    this.timer = setInterval(() => {
      this.dot += ".";
      if (this.dot.length > 3) {
        this.dot = "";
      }
    }, 500);
  },

  destroyed() {
    clearInterval(this.timer);
  }
};
</script>

<style lang="less">
.data-v-loading3 {
  display: inline-block;
  position: relative;
  width: 180px;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  text-align: center;
  // border: 1px solid var(--color);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  &.data-v-loading3 {
    margin-left: 10px;
  }
  .text {
    color: var(--color-text);
    font-size: 14px;
    .dot {
      display: inline-block;
      width: 10px;
      text-align: left;
    }
  }
  .square {
    position: absolute;
    width: 10px;
    height: 2px;
    background: var(--color-square);
    &.top-left {
      top: -2px;
      left: 0;
    }
    &.top-right {
      top: -2px;
      right: 0;
    }
    &.bottom-left {
      left: 0;
      bottom: -2px;
    }
    &.bottom-right {
      right: 0;
      bottom: -2px;
    }
  }
}
</style>
